<template>
    <ul class="prolist">
        <li class="proitem" :class="hot ? 'hotitem' : ''" 
         v-for="item of prolist" :key="item.proid" @click="goDetail(item.proid)">
            <div class="itemimg">
                <img :src="item.proimg" alt="">
            </div>
            <div class="iteminfo">
                <h3>{{ item.proname }}</h3>
                <div class="desc">{{ item.desc }}</div>
            </div>
        </li>
    </ul>
</template>
<script>
// import { getDetail } from '@/api'
export default {
  props: {
    prolist: {
      type: Array,
      default: () => {
        return []
      }
    },
    hot: {
        type:Boolean,
        default: false
    } 
  },
  methods: {
      goDetail (proid) {
          this.$router.push({name:'detail',params:{proid}})
      }
  }
}
</script>
<style lang='scss' scoped>
@import '@/lib/reset.scss';
.prolist{
        @include clearfix();
    .proitem{
        @include rect(100%,1rem);
        @include border(0 0 1px 0,#ccc,solid);
        @include flexbox();
        @include box-sizing(border-box);
        .itemimg{
            @include rect(1rem,1rem);
            img{
                @include rect(0.9rem,0.9rem);
                @include display(block);
                @include border(1px,#ccc,solid);
                @include margin(0.05rem);
                @include box-sizing(border-box);
            }
        }
        .iteminfo{
            @include flex();
            @include padding(0.06rem 0.05rem);
            .desc{
                @include ellipsis(100%,1)
            }
        }
        &.hotitem{
            float:left;
            margin: 0 2px;
            @include clearfix();
            @include border(1px,#ccc,solid);
            @include flex-direction(column);
            @include rect(22%,auto);
            .itemimg{
                @include rect(100%,auto);
                @include display(blak);
                img{
                    @include rect (100%,auto);
                    @include display(block);
                }
            }
            .iteminfo{
                @include rect(100%,auto);
                @include display(block);
                h3{
                    @include ellipsis(100%,1);
                }
                desc{
                    @include display(none);
                }
            }
        }
    }
}
</style>
